package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Slider() {
	@layouts.DocsLayout(
		"Slider",
		"Control for selecting a numeric value within a range.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "Value",
						ID:   "value",
					},
					{
						Text: "Steps",
						ID:   "steps",
					},
					{
						Text: "Disabled",
						ID:   "disabled",
					},
					{
						Text: "External Value",
						ID:   "external-value",
					},
				},
			},
			{
				ID:   "api-reference",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "slider",
						Text: "Slider",
					},
					{
						ID:   "input",
						Text: "Input",
					},
					{
						ID:   "value",
						Text: "Value",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Slider",
			Description: templ.Raw("Control for selecting a numeric value within a range."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Slider",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.SliderDefault(),
				PreviewCodeFile: "slider_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "slider",
					JSFiles:       []string{"slider"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Value",
					ShowcaseFile:    showcase.SliderValue(),
					PreviewCodeFile: "slider_value.templ",
					ID:              "value",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Steps",
					ShowcaseFile:    showcase.SliderSteps(),
					PreviewCodeFile: "slider_steps.templ",
					ID:              "steps",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Disabled",
					ShowcaseFile:    showcase.SliderDisabled(),
					PreviewCodeFile: "slider_disabled.templ",
					ID:              "disabled",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "External Value",
					ShowcaseFile:    showcase.SliderExternalValue(),
					PreviewCodeFile: "slider_external_value.templ",
					ID:              "external-value",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api-reference",
			}) {
				@modules.APILegend()
				<div id="slider" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Slider",
						Description: "Main slider container component.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the slider component",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the slider container",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the slider container",
							},
						},
					})
				</div>
				<div id="input" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Input",
						Description: "The actual range input element.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "randomID",
								Description: "Unique identifier for the input element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the input",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the input",
							},
							{
								Name:        "Name",
								Type:        "string",
								Default:     "\"\"",
								Description: "Name attribute for the input field",
							},
							{
								Name:        "Min",
								Type:        "int",
								Default:     "0",
								Description: "Minimum value for the slider",
							},
							{
								Name:        "Max",
								Type:        "int",
								Default:     "0",
								Description: "Maximum value for the slider",
							},
							{
								Name:        "Step",
								Type:        "int",
								Default:     "0",
								Description: "Step increment for slider values",
							},
							{
								Name:        "Value",
								Type:        "int",
								Default:     "0",
								Description: "Current value of the slider",
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the slider is disabled",
							},
						},
					})
				</div>
				<div id="value">
					@modules.APITable(modules.APITableProps{
						Title:       "Value",
						Description: "Display element for the current slider value.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "\"\"",
								Description: "Unique identifier for the value display element",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the value display",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the value display",
							},
							{
								Name:        "For",
								Type:        "string",
								Default:     "\"\"",
								Description: "ID of the slider input this value display is connected to",
							},
						},
					})
				</div>
			}
		}
	}
}
